<template>
  <div class="widget-config">
    <el-form
      v-if="data && Object.keys(data).length > 0"
      label-suffix="："
      label-position="left"
      label-width="90px"
      size="small"
    >
      <el-collapse v-model="collapse">
        <el-collapse-item name="1" title="基本属性">
          <el-form-item v-if="data.type && !data.component" label="类型">
            <el-select
              v-model="data.type"
              style="width: 100%"
              placeholder="请选择类型"
              @change="handleChangeType"
            >
              <el-option-group
                v-for="group in fields"
                :key="group.title"
                :label="group.title"
              >
                <el-option
                  v-for="item in group.list"
                  :key="item.type"
                  :label="item.label"
                  :value="item.type"
                />
              </el-option-group>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="属性值">
            <el-input v-model="data.prop" clearable placeholder="属性值" />
          </el-form-item> -->
          <el-form-item v-if="!['title'].includes(data.type)" label="标题">
            <el-input v-model="data.label" clearable placeholder="标题" />
          </el-form-item>
          <el-form-item
            v-if="!['group', 'dynamic'].includes(data.type)"
            label="标题宽度"
          >
            <el-input-number
              v-model="data.labelWidth"
              :min="0"
              :step="10"
              controls-position="right"
              placeholder="标签宽度"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item v-if="!data.subfield" label="标签位置">
            <el-select
              v-model="data.labelPosition"
              placeholder="标签位置"
              clearable
            >
              <el-option label="上" value="top" />
              <el-option label="左" value="left" />
              <el-option label="右" value="right" />
            </el-select>
          </el-form-item>
          <el-form-item v-if="data.subfield" label="宽度">
            <el-input-number
              v-model="data.width"
              style="width: 100%"
              controls-position="right"
              placeholder="宽度"
              :min="100"
            />
          </el-form-item>
          <el-form-item
            v-if="!data.subfield && !['group'].includes(data.type)"
            label="表单栅格"
          >
            <el-input-number
              v-model="data.span"
              style="width: 100%"
              controls-position="right"
              placeholder="表单栅格"
              :min="2"
              :max="24"
            />
          </el-form-item>
          <!-- <el-form-item
            v-if="
              [
                'cascader',
                'checkbox',
                'radio',
                'select',
                'tree',
                'img',
                'array',
                'slider',
                'timerange',
                'daterange',
                'datetimerange',
              ].includes(data.type)
            "
            label="数据类型"
          >
            <template slot="label">
              <el-link
                :underline="false"
                href="https://avuejs.com/docs/datatype.html"
                target="_blank"
              >
                数据类型
                <i class="el-icon-question" />
              </el-link>
            </template>
            <el-select v-model="data.dataType" placeholder="数据类型" clearable>
              <el-option label="String" value="string" />
              <el-option label="Number" value="number" />
              <el-option label="Array" value="array" />
            </el-select>
          </el-form-item> -->
          <el-form-item label="字段提示">
            <el-input v-model="data.tip" clearable placeholder="字段提示" />
          </el-form-item>
          <el-form-item
            v-if="data.tip && !['upload'].includes(data.type)"
            label="字段提示位置"
            label-width="110px"
          >
            <el-select
              v-model="data.tipPlacement"
              placeholder="字段提示位置"
              clearable
            >
              <el-option label="上" value="top" />
              <el-option label="下" value="bottom" />
              <el-option label="左" value="left" />
              <el-option label="右" value="right" />
            </el-select>
          </el-form-item>
          <el-form-item label="标题提示">
            <el-input
              v-model="data.labelTip"
              clearable
              placeholder="标题提示"
            />
          </el-form-item>
          <el-form-item
            v-if="data.labelTip && !['upload'].includes(data.type)"
            label="标题提示位置"
            label-width="110px"
          >
            <el-select
              v-model="data.labelTipPlacement"
              placeholder="标题提示位置"
              clearable
            >
              <el-option label="上" value="top" />
              <el-option label="下" value="bottom" />
              <el-option label="左" value="left" />
              <el-option label="右" value="right" />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="
              ![
                'color',
                'dynamic',
                'group',
                'ueditor',
                'upload',
                'map',
                'cusimg',
              ].includes(data.type)
            "
            label="默认值"
          >
            <template v-if="defaultValues && defaultValues[data.type]">
              <el-select
                v-model="data.value"
                allow-create
                clearable
                filterable
                placeholder="默认值"
              >
                <el-option
                  v-for="item in defaultValues[data.type]"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
            <template v-else>
              <el-input v-model="data.value" clearable placeholder="默认值" />
            </template>
          </el-form-item>
          <!-- <el-form-item v-if="!['cusimg'].includes(data.type)" label="详情模式">
            <el-switch v-model="data.detail" />
          </el-form-item> -->
          <el-form-item
            v-if="
              [
                'input',
                'password',
                'textarea',
                'year',
                'month',
                'week',
                'date',
                'time',
                'datetime',
                'daterange',
                'timerange',
                'datetimerange',
              ].includes(data.type)
            "
            label="是否只读"
          >
            <el-switch v-model="data.readonly" />
          </el-form-item>
          <el-form-item v-if="!['cusimg'].includes(data.type)" label="是否禁用">
            <el-switch v-model="data.disabled" />
          </el-form-item>
          <el-form-item v-if="!['cusimg'].includes(data.type)" label="是否可见">
            <el-switch v-model="data.display" />
          </el-form-item>
          <el-form-item v-if="!['cusimg'].includes(data.type)" label="是否必填">
            <el-switch v-model="data.required" />
            <el-input
              v-if="data.required"
              v-model.lazy="data.pattern"
              placeholder="正则表达式"
            />
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item name="2" title="组件属性">
          <component
            :is="getComponent"
            :data="data"
            :default-values="defaultValues"
          />
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <div v-else>
      <el-empty
        description="拖拽字段进行配置"
        :image-size="100"
        class="empty-content"
        style="margin-top: 50%"
      />
    </div>
  </div>
</template>

<script>
  import fields from './fieldsConfig.js'

  const dateArr = [
    'year',
    'month',
    'week',
    'date',
    'datetime',
    'time',
    'daterange',
    'timerange',
    'datetimerange',
    'dates',
  ]

  export default {
    name: 'WidgetConfig',
    props: ['data', 'defaultValues'],
    data() {
      return {
        fields,
        collapse: ['1', '2', '3'],
        validator: {
          type: null,
          required: null,
          pattern: null,
          length: null,
        },
      }
    },
    computed: {
      getComponent() {
        const prefix = 'config-'
        const { type, component } = this.data
        if ((!type || component) && type !== 'ueditor') return prefix + 'custom'
        let result = 'input'

        if ([undefined, 'input', 'password', 'url'].includes(type)) {
          result = 'input'
        } else if (dateArr.includes(type)) result = 'date'
        else if (['array', 'img'].includes(type)) result = 'array'
        else if (['tree', 'cascader'].includes(type)) result = 'tree'
        else if (['cusimg'].includes(type)) result = 'cusimg'
        else if (['radio', 'checkbox', 'select'].includes(type)) {
          result = 'select'
        } else result = type

        return prefix + result
      },
    },
    watch: {
      'data.required'(val) {
        if (val) {
          this.validator.required = {
            required: true,
            message: `${this.data.label}必须填写`,
          }
          this.generateRule()
        } else {
          this.validator.required = null
          this.data.pattern = null
        }
      },
      'data.pattern'(val) {
        if (val) {
          this.validator.pattern = {
            pattern: val,
            message: `${this.data.label}格式不匹配`,
          }
        } else this.validator.pattern = null
        this.generateRule()
      },
    },
    methods: {
      handleChangeType(type) {
        if (!type) return
        let config
        for (const f of this.fields) {
          config = f.list.find((l) => l.type === type)
          if (config) break
        }
        if (!config) return
        for (const key in config) {
          if (
            config &&
            Object.prototype.hasOwnProperty.call(config, key) &&
            !['icon', 'label', 'span'].includes(key)
          ) {
            this.$set(this.data, key, this.deepClone(config[key]))
          }
        }
      },
      generateRule() {
        const rules = []
        Object.keys(this.validator).forEach((key) => {
          if (this.validator[key]) rules.push(this.validator[key])
        })
        if (rules.length === 0) delete this.data.rules
        else this.data.rules = rules
      },
    },
  }
</script>
